/** @class BlockTabs 
	@description gere un systeme de bloc a onglet.
	@use 
			<div class="blockTabs">
				<ul class="tabs blockTabsBtns onglets3">
					<li class="first"></li>
					<li class=""></li>
					<li class="last"></li>
				</ul>
				<div class="tabCtn"></div>
				<div class="tabCtn tabCurrent"></div>
				<div class="tabCtn"></div>
			</div>
			
			Le nombre de <li> doit correspondre au class="tabCtn".
			Chaque click de <li> declenchera l'ouverture d'un element possedant la class="tabCtn".
			Le premier <li> ouvre le 1er class="tabCtn" ...
			
	@option si <div class="blockTabs blockTabsHover"> le comportement se declenche au mouseover.
	@return behavior 
*/
var BlockTabs = new Class({
	initialize: function (block){
		console.log(block);
		var event = $(block).hasClass('blockTabsHover') ? "mouseover" : "click";
		this.block = block;
		//get handler
		this.lis = $(block).getElements('ul.blockTabsBtns li');
		this.as = $(block).getElements('ul.blockTabsBtns li a');
		console.log(this.lis, this.as)
		// get togglelable 
		this.as.addEvent(event, function (e){
			e.stop();
			var newCurrent = $(e.target.href.split("#")[1]);
			this.toggle(newCurrent);
		}.bind(this))
		
		this.ctns = this.block.getElements('.tabCtn');
	},
	
	toggle: function (newCurrent){
		this.ctns.each(function (el, i){
			if(newCurrent == el) el.addClass('tabCurrent');
			else el.removeClass('tabCurrent');
		}.bind(this));
		Notifier.fireEvent("onLayoutChanged");
	}
});
new Moodule(
	"div.blockTabs", 
	
	BlockTabs,
	
	{
		classId: "BlockTabs",
		checkCapabilities: ["css"]
	}
);
